<template>
	<view class="privacy-modal" :class="{ show: innerShow }" @touchmove.stop="" :style="Theme">
		<view class="privacy-dialog">
			<view class="privacy-title">
				{{privacyTitle}}
			</view>
			<view class="privacy-content">
				{{ privacyDesc }}
				<text class="privacy-link" @click="openPrivacyContract">
					{{ privacyContractName || '《用户隐私指引》' }}
				</text>
				{{ privacySubDesc }}
			</view>
			<view class="privacy-dialog-footer">
				<button id="btn-disagree" type="default" class="btn btn-disagree" @click="handleDisagree">
					拒绝
				</button>
				<button id="agree-btn" type="default" class="btn btn-agree" open-type="agreePrivacyAuthorization"
					@bindagreeprivacyauthorization="handleAgree" @click="handleAgree" >
					同意
				</button>
			</view>
		</view>
	</view>
</template>
<script setup>
	/**
	 * @description 微信小程序用户隐私协议
	 * @property {String} privacyTitle		隐私协议弹窗标题
	 * @property {String} privacyDesc		隐私协议前描述
	 * @property {String} privacyName		隐私协议名称
	 * @property {String} privacySubDesc	隐私协议后描述
	 * @event {Function} 
	 */
	const props = defineProps({
		privacyTitle: {
			type: String,
			default: '用户隐私保护提示'
		},
		privacyDesc: {
			type: String,
			default: '感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意'
		},
		privacyName: {
			type: String,
			default: ''
		},
		privacySubDesc: {
			type: String,
			default: '当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容。'
		}
	})
	const emits = defineEmits(['disagree', 'agree'])
	
	const { Theme } = useTheme()
	const innerShow = ref(false)
	const privacyContractName = ref(props.privacyName)
	
	onMounted(() => {
		getPrivacySetting()
	})
	onActivated(() => {
		getPrivacySetting()
	})
	
	const getPrivacySetting = () => {
		if(!wx.getPrivacySetting) {
			return
		}
		wx.getPrivacySetting({
			success: res => {
				if(props.privacyName === '') {
					privacyContractName.value = res.privacyContractName
				}
				if(res.needAuthorization) {
					innerShow.value = true
				} else {
					innerShow.value = false
				}
			}
		})
	}
	
	// 拒绝隐私协议
	const handleDisagree = () => {
		innerShow.value = false
		emits('disagree')
	}
	
	// 同意隐私协议
	const handleAgree = () => {
		innerShow.value = false
		emits('agree')
	}
	
	// 打开隐私协议
	const openPrivacyContract = () => {
		wx.openPrivacyContract({
			success: () => {
				// 打开成功
			}, 
			fail: () => {
				// 打开失败
			}
		})
	}
	
</script>
<style lang="scss" scoped>
	/* ==================
		模态窗口
	 ==================== */
	.privacy-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000rpx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}
	
	.privacy-modal::before {
		content: " ";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	
	.privacy-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	
	.privacy-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680rpx;
		max-width: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		background: linear-gradient(180deg, var(--primary-color) 0%, #fff 30%)
	}
	
	/* ==================
			弹窗标题
	 ==================== */
	.privacy-title{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 700;
		cursor: none;
		pointer-events: none;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		position: relative;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.privacy-content {
		color: #333333;
		font-size: 30rpx;
		line-height: 1.6;
		text-align: left;
		padding: 0 40rpx;
		.privacy-link {
			color: var(--primary-color);
		}
	}

	.privacy-dialog-footer {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0 60rpx;
		.btn {
			width: 250rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 34rpx;
			color: #FFFFFF;
			border: none;
			border-radius: 10rpx;
			background: var(--primary-color);
		}
		.btn::after {
			border: none;
		}
		.btn-disagree {
			color: var(--primary-color);
			background: #EEEEEE;
		}
	} 
</style>
